<template>
    <head-bar></head-bar>
    <div class="mainContent" ref="contentRef">
        <router-view></router-view>
    </div>
</template>
<script setup>
import HeadBar from '@/components/layout/headBar.vue';

// 滚动相关 - better-scroll
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import MouseWheel from '@better-scroll/mouse-wheel'
BScroll.use(Pullup)
BScroll.use(PullDown)
BScroll.use(MouseWheel)
// end
const contentRef = ref(null)

let ob;
onMounted(()=>{
    nextTick(()=>{
        ob = new BScroll(contentRef.value,{
            click : true,
            probeType: 3,
            pullUpLoad : {
                threshold : 200
            },
            pullDownRefresh: {
                threshold: 70,
                stop: 0
            },
            mouseWheel : true,
        })
    })
})


</script>

<style lang="scss" scoped>
    .mainContent{
        width: 100%;
        height: calc(100% - $NAVBAR_HEIGHT);
        position: absolute;
        top: $NAVBAR_HEIGHT;
        background-color: pink;
    }
</style>